<template>
    <div class="_function">
        <h2>{{ props.datalist.title }}</h2>
        <div class="_function_content">
            <div class="_function_son_one">
                <img :src="props.datalist.left" alt="" style="width: 100%;height: 100%;">
            </div>

            <div class="_function_son_two">
                <ul>
                    <li v-for="data in props.datalist.content" :key="data" @click="handleJump(data.filterId)">
                        <div class="item">
                            <div class="img_item">
                                <img :src="data.img" alt="" style="width: 100%;height: 100%;">
                            </div>
                            <h3 class="title">{{ data.title }}</h3>
                            <p class="text">{{ data.text }}</p>
                            <p class="price">{{ data.price }}元起</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    datalist: Object
})

const handleJump = (id) => {
    router.push(`/shop/detail/${id}`)
}
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

._function {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;

    h2 {
        font-size: 22px;
        height: 58px;
        font-weight: 200;
        line-height: 58px;
    }

    ._function_content {
        width: 1200px;
        height: 600px;
        display: flex;

        ._function_son_one {
            width: 230px;
            height: 600px;
        }

        ._function_son_two {
            width: 970px;
            height: 600px;

            ul {
                width: 970px;
                height: 610px;
                margin-left: 10px;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;


                li {
                    width: 242.5px;
                    height: 300px;
                    padding: 0 10px;
                    box-sizing: border-box;
                    background: #f5f5f5;
                    cursor: pointer;

                    .item {
                        width: 100%;
                        height: 290px;
                        background: white;
                        display: flex;
                        align-items: center;
                        flex-direction: column;


                        .img_item {
                            margin-top: 50px;
                            width: 130px;
                            height: 130px;
                        }

                        .title {
                            margin-top: 30px;
                            font-size: 13px;
                            font-weight: 400;
                        }

                        .text {
                            width: 200px;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 10px;
                            color: #ccc;
                        }

                        .price {
                            margin-top: 10px;
                            font-size: 10px;
                            color: #ff6700;
                        }
                    }

                    .item:hover {
                        box-shadow: 1px 2px 6px 0px black;
                    }
                }

                li:hover {
                    transform: translateY(-2px);
                }
            }
        }
    }
}
</style>